<template>
  <div>
    <el-drawer
      title="消费明细"
      :before-close="handleClose"
      :visible.sync="electorCardConsumerDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%"
    >
      <div class="demo-drawer__content">
        <el-table :data="list" v-loading="loading">
          <el-table-column
            property="stationName"
            label="油站名称"
            width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="orderNo"
            label="订单号"
            width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="oilName"
            label="油品名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="oilPirce"
            label="油品价格"
          ></el-table-column>
          <el-table-column
            property="orderLiters"
            label="加油升数"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column property="amt" label="实付金额"></el-table-column>
          <el-table-column
            property="consumer"
            label="消费者昵称"
            width="130"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="oilPersonnel"
            label="加油员"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="oilGun"
            label="加油抢号"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="payType"
            label="支付类型"
            :formatter="payTypeFotmat"
          ></el-table-column>
          <el-table-column
            property="status"
            label="订单状态"
            :formatter="statusFotmat"
          ></el-table-column>
          <el-table-column
            property="payDate"
            label="支付完成时间"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="createdDate"
            label="订单创建时间"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getConsumerDetailApi } from "@/api/customer/dzk_Electroic_Card";
export default {
  name: "DzkElectroicCardChargeList",
  props: {
    electorCardConsumerDialog: {
      type: Boolean,
      default: false,
    },
    currentRowData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formLabelWidth: "80px",
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        consumerId: "",
      },
      loading: false,
    };
  },
  watch: {
    electorCardConsumerDialog(val) {
      if (val) {
        this.getList();
      }
    },
  },
  methods: {
    // 获取充值明细
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      params.consumerId = this.currentRowData.userId;
      const res = await getConsumerDetailApi(params);
      this.total = res.total;
      this.list = res.rows;
      this.loading = false;
      console.log("3333", res);
    },
    handleClose() {
      this.$emit("update:electorCardConsumerDialog", false);
    },
    // 支付类型
    payTypeFotmat(row, column) {
      const types = {
        sxf: "随行付",
        dzk: "电子卡",
        wx: "微信",
        zfb: "支付宝",
        xj: "现金",
        pos: "POS机",
        cdk: "车队卡",
        dkq: "实体卡",
      };
      return types[row.payType];
    },
    // 订单状态
    statusFotmat(row) {
      const types = {
        0: "未支付",
        1: "已支付",
        2: "线下退款",
        3: "线上退款",
        4: "支付失败",
      };
      return types[row.status];
    },
  },
};
</script>
